<template>
    <div class='top cor'>
        <div class="zdzs">终端总数</div>
        <div class="zdzsnum">{{ state.info.TOTAL_NUM }}台</div>
        <div class="topflex">
            <div>电签POS&nbsp;&nbsp;&nbsp;{{ state.info.DQPOS_NUM }}台</div>
            <div>传统POS&nbsp;&nbsp;&nbsp;{{ state.info.CTPOS_NUM }}台</div>
        </div>
    </div>
    <div class="chartbox">
        <div>
            <img src="@/assets/my/icon1.png" mode="widthFix" style="width: 14px; vertical-align: bottom;" alt="">
            <span style="margin-left: 3px; font-size: 14px;">唤醒占比</span>
        </div>
        <div class="box">
            <div class="echatsbox" id="tb" style="width: 350px;height: 350px;"></div>

        </div>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import { onMounted, ref } from "vue";
import { posCountCategory, posPageCountCategory } from '../../api/agent'

interface info {
    TOTAL_NUM: string,
    DQPOS_NUM: string,
    CTPOS_NUM:string
}

let myChart = ref('')
let state = reactive({
    info:<info> {},
    option: {}
})

const echartsfun = (chartData) => {

    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('tb')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            bottom: 'bottom'
        },
        color: ['#FFA4A4', '#66d6ff'],
        series: [
            {
                type: 'pie',
                radius: '50%',
                label: {
                    show: true,
                    formatter: function (params) {
                        if (params.percent === undefined) {
                            return params.name + 50 + '%'
                        } else if (params.percent === 0) {
                            return params.name + params.percent + '%'
                        } else {
                            return params.name + params.percent + '%'
                        }
                    }

                },
                data: chartData,
                labelLine: {
                    length: 10,      // 引导线起点到文字的距离
                    length2: 10,    // 引导线终点到饼图边缘的距离
                    smooth: true     // 弯曲程度
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}
onMounted(() => {
    // posPageCountCategory({ currentPage: this.pageNum }).then(res => {
    //     if (res.code === 200) {
    //         this.list = this.list.concat(res.object.list)
    //         if (!res.object.hasNextPage) {
    //             this.hasData = false
    //         }
    //     }
    // })
    posCountCategory({}).then(res => {
        state.info = res.object
        const chartData = [
            {
                name: '电签',
                value: res.object.ACT_DQPOS_NUM
            },
            {
                name: '传统',
                value: res.object.ACT_CTPOS_NUM
            }
        ]
        echartsfun(chartData)
    })
})
</script>
<style lang='scss' scoped>
.top {
    width: 100%;
    height: 150px;
    background: url('@/assets/index/bg.png');
    background-size: 100% 100%;
}

.cor {
    color: #ffffff;
}

.zdzs {
    font-size: 16px;
    font-weight: 400;
    padding-top: 19px;
    padding-left: 36px;
}

.zdzsnum {
    font-size: 26px;
    margin-top: 16px;
    margin-left: 36px;
}

.topflex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 13px;
    padding: 0 36px;
}

.chartbox {
    background: #fff;
    width: 100%;
    height: calc(100vh - 140px);
    position: absolute;
    border-radius: 10px 10px 0px 0px;
    top: 140px;
    padding: 12px 12px;
}

.echatsbox {
    padding-top: 10px;
}
</style>
